<template>
  <div class="museum">
<!--    得有展览介绍 展览展品（展品内容) 留言板块 地点-->
    <div class="nav">
      <div class="title">分类</div>

      <div class="card" >
        <div class="total">
          <el-button @click="back">
              所有
          </el-button>
        </div>
        <div v-for="item in aList" class="cardItem"
             :key="item.id"
             :label="item.name">
          <el-button @click="getCollections(item.id)">
            {{item.name}}
          </el-button>
        </div>
      </div>
    </div>

    <!--  主要内容区域,专门内容搜索-->
    <div class="main">
      <div class="MallCard">
        <el-card class="box-card"  v-for="item in correctList" :key="item">
          <!--              需要展览名 展览地点 展览时间 展览状态 是否需要预约(预约按钮) 封面图-->
          <!--            得有一个显示:更多 的功能-->
          <div class="DataLi" >
            <img :src="item.img" >
            <el-tooltip
                class="box-item"
                effect="dark"
                placement="top">
              <template #content>{{item.name}}</template>
              <div class="name">名称：{{item.name}}</div>
            </el-tooltip>
            <div>年代：{{item.era}}</div>
            <div>馆区：{{item.area}}</div>
          </div>
<!--          <el-button type="primary" @click="$router.push('/productsDetail?id=' + item.id)">详情</el-button>-->
        </el-card>
      </div>
    </div>

    <div class="pagination" style="margin-top: 20px">
      <el-pagination
          background
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total">
      </el-pagination>
    </div>
<!--    展品内容是展品图+名称;而在藏品部分可以竖状排列内容,上面提供搜索框:年代 国别 类别等-->
<!--    目前获取到父类id,据此在collectionstype下面找到对应子类id,并根据子类id进行数据展示-->
  </div>
</template>

<script>
import request from "../../../../front_admin/src/utils/request";
export default {
  name: "MusemDetail",
  data(){
    return{
      collectionsList:[],
      aList:[],
      total: 0,
      // correctId:this.$route.query.id,
      correctList:[],
      params: {
        pageNum: 1,
        pageSize: 12,
      },
    }
  },
  created() {
    this.load(this.$route.query.id)
    this.getCorrectCollections(this.$route.query.id)
    this.getCollections(0)
  },
  methods: {
    //与Mall.vue页面进行对比
    load(loadId) {

      request.get('/collectionstype/page', {
        params: this.params
      }).then(res => {
        if (res.code === '200') {
          //mallList.value获取第一层级
          // this.collectionsList=
          res.data.list.forEach((item) => {
            if (item.id == loadId) {
              this.aList = item.children
            }
          })
          console.log("aList数据是",this.aList)
        }
      })
    },
    //用一个方法获取该大类下的所有子类
    getCorrectCollections(correctId) {
      // let Iparams={}
      // if(){
      //
      // }
      request.get('/collections/page', {
        params: {
          pageSize:1000
        }
      }).then(res => {
        if(res.code === '200'){
          console.log("加载",correctId)
          // this.load(correctId)
          let correctTotal=0;
          this.aList.forEach((i) => {
             //存储300多条数据
            res.data.list.forEach((item) =>{
              // console.log("i.id内人",item.id)
              if(item.categoryId == i.id){
                // console.log("i内数据是",i.id)
                this.correctList.push(item)
                correctTotal++;
              }
            })
          })
          this.collectionsList=this.correctList //一份纯净的大类数据
          this.total = correctTotal
          console.log("总数是",correctTotal)
        }
      })
    },
    getCollections(id){//一个大类的id
      this.correctList=[]
      this.collectionsList.forEach((item) =>{
        if(id != 0){
          if(item.categoryId == id){
            this.correctList.push(item)
          }
        }else{
          this.correctList=this.collectionsList
        }
      })
    },
    handleCurrentChange(pageNum){
      //  点击分页按钮实现分页
      this.params.pageNum=pageNum
      // this.getCollections()
    },
    back(){
      // this.load()
      this.getCollections(0)
    }
  }
}
</script>

<style scoped>
.nav {
  /*background-color: white;*/
  display: flex;
  margin:15px auto;
  width: 60%;
  justify-content:flex-start;
}
.title{
  color: black;
  font-size: 16px;
  font-weight: bold;
  width: 150px;
  margin-top: 14px;
}
.card{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 15px;
}
.total{
  color: #606266;
  font-size: 15px;
  margin-top:-5px;
  margin-right: 10px;
}
.card button{
  /* 清除默认边框 */
  border:0;
  outline:none;
  /*清除默认背景 */
  background-color: transparent;
}
.cardItem{
  margin-right: 20px;
  color: #606266;
  font-size: 15px;
  margin-top:-5px;
}
.main{
  display: flex;
  /*float: left;*/
  width:90%;
  margin:15px auto;
  justify-content: center;
}

.MallCard{
  display: flex;
  float: left;

  flex-wrap: wrap;
  width: 1000px;
}
.box-card{
  width: 32%;
  /*padding: 10px;*/
  margin-bottom: 15px;
  margin-right: 10px;
}
.box-item {
  width: 110px;
  margin-top: 10px;
}
.DataLi img{
  width: 250px;
  height: 250px;
}
.pagination{
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.name{
  overflow:hidden;
  text-overflow:ellipsis;
  /*文本不换行,超出一行被截取*/
  white-space:nowrap;
}
</style>